<template>
	<view class="member-info">
		<view class="title bold" v-if="num != ''">我的队员({{num}}人)</view>

		<u-index-list :index-list="indexList" :topHeight="50">
			<template v-for="(item, index) in itemArr" >
				<!-- #ifdef APP-NVUE -->
				<!-- <u-index-anchor :text="indexList[index]"></u-index-anchor> -->
				<!-- #endif -->

				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<!-- <u-index-anchor :text="indexList[index]"></u-index-anchor> -->
					<!-- #endif -->
					<view class="list-cell flex-align" v-for="(item1, index1) in item" :key="index1">
						<u-avatar :src="item1.avatar" size="90rpx"></u-avatar>
						<view class="right flex-grow-1">
							<view class="name">{{ item1.name }}</view>
							<view class="phone">{{ item1.phone }}</view>
						</view>
						<view class="right flex-grow-1">
							
							<image style="width: 30rpx; height: 30rpx;margin-left: 50%;" :src="bianji" mode=""
								@click="bfEdit(item1)"></image>
							<image style="width: 30rpx; height: 30rpx;margin-left: 10%;" :src="shanchu" mode=""
								@click="bfDel(item1)"></image>
						</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>
		<view class="bottom-add-btn">
			<u-button text="添加队员" shape="circle" @click="add"
				color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				itemArr:[],
				bianji: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7886aba3ece8aae3b489b1944b48572a4f092c41.png',
				shanchu: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fe85ef51643a187a6090a929b34e93738e12e365.png',
				num:''
			}
		},
		onLoad() {
			this.getMemberList()
		},
		onShow() {
			this.getMemberList()
		},
		methods: {
			bfDel(item1) {
				let that = this
				uni.showModal({
				    title: '删除',
				    content: '是否确定删除！',
				    success: function (res) {
				        if (res.confirm) {
							let params = {
								project_id: getApp().globalData.projectId,
								app_id: that.$https.weixinAppId,
								open_id: uni.getStorageSync("openid"),
								id: item1.id,
							}
							venues.delMember(params).then(res => {
								if (res.code == 1) {
									that.getMemberList()
								}
							})
				        } else if (res.cancel) {
				        }
				    }
				});
				
			},
			// 获取学员资料
			async getMemberList() {
				let params = {
					open_id: uni.getStorageSync("openid"),
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					type:1
				}
				let res = await venues.getMemberList(params)
				if (res.code == 1) {
					this.itemArr = res.data.result.itemArr
					this.num = res.data.num
				}
			},
			bfEdit(item1){
				// uni.navigateTo({
				// 	url: '/page_venues/pages/member-info/add/add?id=' + item1.id
				// });
				uni.navigateTo({
				    url: '/page_venues/pages/member-info/add/add?item1='+encodeURIComponent(JSON.stringify(item1))
				});
			},
			add() {
				uni.navigateTo({
					// url: '/page_venues/pages/member-info/add/add'
					url: '/page_venues/pages/member-info/add/add?type='+ 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.member-info {
		padding: 0 34rpx;

		/deep/.u-index-list {
			scroll-view {
				height: calc(100vh - 220rpx - env(safe-area-inset-bottom));
				;
			}
		}

		.title {
			font-size: 32rpx;
			height: 100rpx;
			padding-top: 40rpx;

			&::before {
				content: '';
				display: inline-block;
				width: 6rpx;
				height: 28rpx;
				background-color: #0072ff;
				margin-top: 2rpx;
				margin-right: 22rpx;
			}
		}

		.list-cell {
			padding: 24rpx 0;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 110rpx;
				bottom: 0;
				right: 0;
				height: 1px;
				background-color: #f2f2f2;
			}

			.right {
				margin-left: 20rpx;
			}

			.phone {
				font-size: 22rpx;
				font-weight: 400;
				margin-top: 10rpx;
				color: #BEBEBE;
			}
		}
	}
</style>
